<template>
  <el-dialog
    :model-value="modelValue"
    :title="title"
    :width="width"
    :fullscreen="fullscreen"
    :top="top"
    :modal="modal"
    :modal-class="modalClass"
    :append-to-body="appendToBody"
    :lock-scroll="lockScroll"
    :custom-class="customClass"
    :close-on-click-modal="closeOnClickModal"
    :close-on-press-escape="closeOnPressEscape"
    :show-close="showClose"
    :before-close="handleBeforeClose"
    :center="center"
    :align-center="alignCenter"
    :destroy-on-close="destroyOnClose"
    @close="handleClose"
    @open="handleOpen"
    @opened="handleOpened"
    @closed="handleClosed"
  >
    <!-- 默认插槽 -->
    <div class="base-dialog__content" :class="{ 'base-dialog__content--loading': loading }">
      <el-skeleton v-if="loading" :rows="5" animated />
      <slot v-else></slot>
    </div>

    <!-- 底部插槽 -->
    <template #footer v-if="showFooter">
      <slot name="footer" v-bind="{ loading, confirmDisabled, handleConfirm, handleCancel }">
        <div class="base-dialog__actions">
          <el-button @click="handleCancel" :disabled="loading">
            {{ cancelText }}
          </el-button>
          <el-button
            type="primary"
            @click="handleConfirm"
            :loading="loading"
            :disabled="confirmDisabled"
          >
            {{ confirmText }}
          </el-button>
        </div>
      </slot>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'

// 定义组件属性接口
interface BaseDialogProps {
  // 基础属性
  modelValue: boolean
  title?: string
  width?: string | number
  fullscreen?: boolean
  top?: string
  modal?: boolean
  modalClass?: string
  appendToBody?: boolean
  lockScroll?: boolean
  customClass?: string
  closeOnClickModal?: boolean
  closeOnPressEscape?: boolean
  showClose?: boolean
  center?: boolean
  alignCenter?: boolean
  destroyOnClose?: boolean

  // 底部按钮配置
  showFooter?: boolean
  confirmText?: string
  cancelText?: string
  confirmDisabled?: boolean
  loading?: boolean

  // 设备适配
  mobileFullscreen?: boolean
}

// 定义组件事件
interface BaseDialogEmits {
  (e: 'update:modelValue', value: boolean): void
  (e: 'close'): void
  (e: 'open'): void
  (e: 'opened'): void
  (e: 'closed'): void
  (e: 'confirm'): void
  (e: 'cancel'): void
  (e: 'before-close', done: () => void): void
}

// 默认属性
const props = withDefaults(defineProps<BaseDialogProps>(), {
  title: '',
  width: '50%',
  fullscreen: false,
  top: '15vh',
  modal: true,
  appendToBody: true,
  lockScroll: true,
  closeOnClickModal: false,
  closeOnPressEscape: true,
  showClose: true,
  center: false,
  alignCenter: false,
  destroyOnClose: false,
  showFooter: true,
  confirmText: '确定',
  cancelText: '取消',
  confirmDisabled: false,
  loading: false,
  mobileFullscreen: true
})

// 定义事件
const emit = defineEmits<BaseDialogEmits>()

// 响应式宽度（移动端适配）
const dialogWidth = computed(() => {
  // 这里可以添加设备宽度判断逻辑
  if (props.fullscreen) return '100%'
  return props.width
})

// 响应式全屏（移动端适配）
const isFullscreen = computed(() => {
  // 这里可以添加移动端检测逻辑
  return props.fullscreen
})

// 事件处理函数
const handleClose = () => {
  emit('update:modelValue', false)
  emit('close')
}

const handleOpen = () => {
  emit('open')
}

const handleOpened = () => {
  emit('opened')
}

const handleClosed = () => {
  emit('closed')
}

const handleConfirm = () => {
  emit('confirm')
}

const handleCancel = () => {
  emit('cancel')
  handleClose()
}

const handleBeforeClose = (done: () => void) => {
  emit('before-close', done)
}

// 暴露方法给父组件
defineExpose({
  close: handleClose,
  confirm: handleConfirm
})
</script>

<style scoped>
.base-dialog__content {
  min-height: 100px;
  padding: var(--dbu-space-2) 0;
}

.base-dialog__content--loading {
  padding: var(--dbu-space-4);
}

.base-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--dbu-space-3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .base-dialog__actions {
    flex-direction: column;
    gap: var(--dbu-space-2);
  }

  .base-dialog__actions .el-button {
    width: 100%;
  }
}

/* 全屏对话框样式调整 */
:deep(.el-dialog.is-fullscreen) .base-dialog__actions {
  position: sticky;
  bottom: 0;
  background: var(--el-bg-color);
  padding: var(--dbu-space-4);
  border-top: 1px solid var(--el-border-color-light);
  margin: 0 calc(-1 * var(--dbu-space-6));
  padding-left: var(--dbu-space-6);
  padding-right: var(--dbu-space-6);
}

/* 对话框内容滚动 */
.base-dialog__content {
  max-height: 70vh;
  overflow-y: auto;
}

.base-dialog__content::-webkit-scrollbar {
  width: 6px;
}

.base-dialog__content::-webkit-scrollbar-track {
  background: var(--el-fill-color-light);
  border-radius: 3px;
}

.base-dialog__content::-webkit-scrollbar-thumb {
  background: var(--el-border-color);
  border-radius: 3px;
}

.base-dialog__content::-webkit-scrollbar-thumb:hover {
  background: var(--el-border-color-darker);
}

/* 加载状态样式 */
.base-dialog__content--loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
</style>